<template>
	<!-- 首页购物车页 -->
	<view class="Jy_home_shop_cart_page">
		<view class="Jy_customer_my_center_top_group" :style="{ 'padding-top': statusBarHeight + 'px' }">
			<view class="back_icon_box">
				<view class="shop_cart_title_group">
					<view class="shop_cart_title_box"><text>购物车</text></view>
					<view class="shop_cart_number_box">
						<text>({{ cartNumber }})</text>
					</view>
				</view>
				<view class="shop_cart_management_group">
					<view class="shop_cart_management_box" @click="getShopCartManagement" v-if="runDelisNotShow"><text>管理</text></view>
					<view class="shop_cart_management_box red" @click="getShopCartManagement" v-else><text>退出管理</text></view>
				</view>
			</view>
		</view>
		<!-- 购物车内容 -->
		<view class="Jy_home_shopping_cart_ct_group" :style="{ height: 'calc(100vh - 76rpx - ' + statusBarHeight + 'px - 100rpx)' }">
			
			<!-- 购物车数据为空时 -->
			<view class="Jy_shopping_cart_empty_group" v-if="true">
				<DataEmpty imageUrl="https://louiscloud-1304691295.cos.ap-guangzhou.myqcloud.com/home/%E6%9A%82%E6%97%A0%E5%95%86%E5%93%81.png" startPadding="true" bgColor="#fff" tipsText="购物车空空如也"></DataEmpty>
			</view>
			<view class="Jy_home_shopping_cart_ct_box" v-else>
				<u-checkbox-group
				            v-model="shoppingCheckboxValue"
				            placement="column"
				            @change="shoppingCheckboxChange"
				        >
				<view class="shopping_cart_list" v-for="(item, index) in 3" :key="index">
					<view class="bs_group">
						<!-- 店铺信息 -->
						<view class="store_group">
							<view class="store_logo_box"><image src="../../../static/shopping_cart/store.png" mode="aspectFit"></image></view>
							<view class="store_text_box"><text>英郎官方店</text></view>
						</view>
						<view class="arrow-right_box"><image src="../../../static/main_menu/right.png" mode="aspectFit"></image></view>
					</view>
					<view class="Jy_shop_list_group">
						<view class="Jy_shop_list_box" v-for="(jitem, jindex) in 2" :key="jindex">
							<u-swipe-action>
								<u-swipe-action-item :options="signOptions">
									<view class="Jy_shop_list_box_continer" @click="getShoppingDetail()">
										<view class="check_shop_box">
											<u-checkbox
												shape="circle"
												activeColor="#ff7500"
											      :name="jindex+ '' + index"
												size="22"
											></u-checkbox> 
										</view>
										<view class="shop_image_box">
											<!-- 商品图片 -->
											<image src="../../../static/home/logo.png" mode="aspectFill"></image>
										</view>
										<view class="shop_info_group">
											<view class="shop_info_box">
												<view class="name_box">
													<text>这是商品的名字这是商品的名字这是商品的名字这是商品的名字名字这是商品的名字名字这是商品的名字</text>
												</view>
												<view class="shop_paramter_group">
													<text>商品的规格</text>
												</view>
												<view class="shop_setup_group">
													<view class="price_box">
														<text>￥</text>
														<text class="number">1999</text>
													</view>
													<!-- 商品步进器 -->
													<view class="b_setup_group">
														<u-number-box v-model="jindex" @change="shopNumberValChange"></u-number-box>
													</view>
												</view>
											</view>
										</view>
									</view>
								</u-swipe-action-item>
							</u-swipe-action>
						</view>
					</view>
				</view>
				</u-checkbox-group>
			</view>
		</view>

		<!-- 购物车操作按钮 -->
		<view class="shop_card_option_group">
			<view class="shop_card_option_box">
				<!-- 全选框 -->
				<view class="left_all_checkbox_group">
					<u-checkbox-group v-model="allCheckboxValue" placement="column" shape="circle" @change="getAllCheckboxChange">
						<u-checkbox
							v-for="(item, index) in allCheckboxList"
							:key="index"
							:label="item.name"
							:name="item.name"
							activeColor="#ff7500"
							:disabled="item.disabled"
							size="22"
						></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="right_js_del_group" v-if="runDelisNotShow">
					<view class="total_price_box">
						<text class="small_font">合计:</text>
						<text class="color small_font bold">￥</text>
						<text class="big_font color bold">{{ totalPrice }}</text>
					</view>
					<view class="js_button_group">
						<view class="js_button_box"><text>结算</text></view>
					</view>
				</view>
				<!-- 管理模式按钮 -->
				<view class="right_js_del_group2" v-else>
					<view class="right_js_del_box">
						<view class="right_js_del_coll_box"><text>移入收藏</text></view>

						<view class="right_js_delete_box"><text>删除</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 数据为空
import DataEmpty from '../../../components/DataEmpty.vue';
	
export default {
	components: { DataEmpty },
	data() {
		return {
			// 适配头部导航高度
			statusBarHeight: getApp().globalData.statusBarHeight,
			// 购物车数量
			cartNumber: 3,
			allCheckboxValue: [],
			// 基本案列数据
			allCheckboxList: [
				{
					name: '全选',
					disabled: false
				}
			],
			// 合计总价
			totalPrice: 0,
			// 切换结算|删除按钮
			runDelisNotShow: true,
			signOptions: [
				{
					text: '收藏',
					style: {
						backgroundColor: '#ff9334'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#e72323'
					}
				}
			],
			// 购物车选择的内容
			shoppingCheckboxValue: [],
		};
	},
	// tabbar 按钮被点击
	onTabItemTap(e){
		// 播放音效
		this.music.play_dede()
	},
	methods: {
		// 点击全选按钮
		getAllCheckboxChange(n) {
			console.log('change', n);
		},
		// 点击购物车上方管理按钮
		getShopCartManagement() {
			this.runDelisNotShow = !this.runDelisNotShow;
		},
		// 复选框的值改变
		shoppingCheckboxChange(e) {
			console.log("cart:" + e)
		},
		// 步进器
		shopNumberValChange(e) {
			console.log('number:' + e.value)
		},
		// 跳转到商品详情
		getShoppingDetail() {
			uni.navigateTo({
				url: '/pages/shoppingDetail/shoppingDetail'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'customerShoppingCart.scss';
</style>
